<template>
    <div class="center">
        <div class="center-form">
          <el-form inline label-width="160px" @submit.native.prevent>
            <el-form-item label="商品归属的小程序appid">
               <el-input v-model="listParsem.cardTemplateAppId" placeholder="请输入商品归属的小程序appid" clearable class="selWidth" size="small" />
            </el-form-item>
            <el-form-item label="商品名称">
               <el-input v-model="listParsem.cardTemplateName" placeholder="请输入商品名称" clearable class="selWidth" size="small" />
            </el-form-item>
            <el-form-item label="门店Id">
               <el-input v-model="listParsem.shopId" placeholder="请输入门店Id" clearable class="selWidth" size="small" />
            </el-form-item>
            <el-form-item label="商品状态">
                <el-select v-model="listParsem.cardTemplateStatus" clearable placeholder="请选择商品状态">
                  <el-option
                    v-for="item in cardTemplateStatusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label=" ">
              <el-button
                icon="el-icon-search"
                type="primary"
                @click="initList"
                >搜索</el-button>
              <el-button icon="el-icon-refresh" type="primary" @click="resetList"
                >重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- <div class="center-construct">
            <el-button type="primary" style="margin-right: 30px;" @click="missionDialogClick">新增任务</el-button>
        </div> -->
        <div class="center-table">
            <el-table
            height="60vh"
          :data="tableList"
          tooltip-effect="dark"
          style="width: 100%"
          stripe
          :header-cell-style="tableHeaderColor"
        >
        <el-table-column
            label="商品图片"
            align="center"
            width="250"
          >
          <template slot-scope="scope">
              <el-image 
                style="width: 100px; height: 100px"
                :src="scope.row.imageUrlList" 
                :preview-src-list="[scope.row.imageUrlList]">
              </el-image>
          </template>
          </el-table-column>
        <el-table-column
            prop="cardTemplateName"
            label="商品名称"
            align="center"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="cardTemplateAppId"
            label="商品归属的小程序appid"
            align="center"
            width="200"
          >
          </el-table-column>
          <el-table-column
            prop="cardType"
            label="商品类型"
            align="center"
            width="150"
          >
             <template slot-scope="scope">
                 <p v-if="scope.row.cardType == 'TIMES_CARD'">次卡</p>
                 <p v-if="scope.row.cardType == 'PERIOD_PAY'">周期付</p>
                 <!-- <p v-else>团购</p> -->
             </template>
          </el-table-column>
          <el-table-column
            prop="settleType"
            label="结算方式"
            align="center"
          >
             <template slot-scope="scope">
                <p v-if="scope.row.settleType == '1'">统一收款</p>
                <p v-if="scope.row.settleType == '2'">分店结算</p>
             </template>
          </el-table-column>
          <el-table-column
            prop="categoryId"
            label="商品类目Id"
            align="center"
            width="150"
          />
          <el-table-column
            prop="salableStartTime"
            label="售卖开始时间"
            align="center"
            width="200"
          />
          <el-table-column
            prop="salableEndTime"
            label="售卖结束时间"
            align="center"
            width="200"
          />
          <el-table-column
            prop="cardTemplateStatus"
            label="商品状态"
            align="center"
            width="150"
            fixed="right"
          >
             <template slot-scope="scope">
                <p >{{ funCardStatus(scope.row.cardTemplateStatus) }}</p>
             </template>
          </el-table-column>
          
          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            width="120"
          >
            <template slot-scope="scope">
                <el-popconfirm
                   v-if="scope.row.cardTemplateStatus == 'PUBLISHED'"
                   title="是否确认下架"
                    @confirm="redCardsStatusClose(scope.row)"
                    >
                      <el-button
                      type="text"
                      slot="reference"
                      > 下架</el-button>
                </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          @size-change="sizechange"
          :page-size="listParsem.size"
          :current-page.sync="listParsem.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
    </div>
    </div>
</div>
</template>
<script>
import { findPage , updateCardsStatus } from '@/api/fetchApi'
export default{
    data(){
        return{
            listParsem:{page:1,size:10}, 
            total:0,
            tableList:[],
            cardTemplateStatusList:[ {value:'PUBLISHED' , label:'已上架'} , {value:'REVIEWING' , label:'审核中'} , {value:'REJECTED' , label:'审核失败'} , {value:'DELISTING' , label:'已下架'} , {value:'FREEZING' , label:'已冻结'}, {value:'EXPIRED' , label:'已过期'}]
        }
    },
    mounted(){
        this.initList()
    },
    methods:{
       async initList(){
           const res = await findPage(this.listParsem)
           console.log(res)
           this.tableList = res.data
           this.total = res.pageInfo.recordCount
        },
        async redCardsStatusClose(v){
           const res = await updateCardsStatus({ cardTemplateId:v.cardTemplateId ,operateStatus:'STOP'})
           if(res.code == '10000'){
                this.synVisible = false
                this.$message.success('下架成功！')
                this.initList()  
          }else{
                this.synVisible = false
                this.$message.error(res.message)
                this.initList()  
          }
        },
        funCardStatus(v){
            // const list = 
            const data = this.cardTemplateStatusList.find(item=>item.value == v)
            return data.label
        },
        resetList(){
          this.listParsem = {page:1,size:10}
          this.initList()
        },
        handleCurrentChange(val) {
          this.listParsem.page = val;
          this.initList()
        },
        sizechange(val) {
          this.listParsem.size = val;
          this.initList()
        },
        tableHeaderColor({ row, column, rowIndex, columnIndex }) {
          if (rowIndex === 0) {
            return "background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;";
          }
       }
    }
}
</script>

<style scoped>
.center{
    width: 100%;
    height: calc(100% - 30px);
    background-color: #fff;
    padding-top: 30px;
}
.center-form{
  padding: 0 22px;
}
.center-construct{
    width: 100%;
    display: flex;
    justify-content: end;
    margin-bottom: 30px;
}
.center-table{
    margin-top: 30px;
    padding: 0 20px;
}
.construct-dialog{
    height: 60vh;
    overflow-y: auto;
}
::v-deep .el-upload--text{
    width: 160px;
    height: 160px;
    line-height: 160px;
}
/* 针对 Firefox */
.construct-dialog {
  scrollbar-width: none; /* Firefox */
}
 
/* 针对 Chrome, Edge 和 Safari */
.construct-dialog::-webkit-scrollbar {
  width: 0; /* Chrome, Edge 和 Safari */
}
 
/* 针对 IE 10+ */
.construct-dialog {
  -ms-overflow-style: none;  /* IE 10+ */
}
 
/* 针对 IE 11 */
.construct-dialog {
  overflow: auto;
}
.avatar{
  width: 160px;
  height: 160px;
}
</style>